<template>
  <div class="container">
    <navbar
      :vaniconL="true"
      :vaniconR="false"
      iconNameL="arrow-left"
      iconNameR="icon-gengduo"
      @clickLeft="goBack"
      @clickRight="showShare = true"
    >{{$t('detail.image_details')}}</navbar>
    <!-- <div class="header">
      <span class="icon" :class="listFlag? 'icon-xianshi': 'icon-yincang'" @click="listDisplay"></span>
      <span class="name">病人1</span>
      <span class="icon icon-gengduo" @click="showShare = true"></span>
    </div>-->
    <!-- <van-notice-bar
      v-if="sliderFlag"
      mode="closeable"
      color="#f56c6c"
      background="#fef0f0"
      left-icon="info-o"
      scrollable
    >{{$t('detail.slide_tips')}}</van-notice-bar>-->
    <van-share-sheet
      v-model="showShare"
      :title="$t('detail.share_to_friends_now')"
      :options="options"
      @select="onSelect"
    />
    <transition name="fade">
      <div class="image-container" v-show="listFlag">
        <ul class="image-list">
          <li class="image-box" @click="test1"></li>
          <li class="image-box" @click="test2"></li>
          <li class="image-box"></li>
          <li class="image-box"></li>
          <li class="image-box"></li>
          <li class="image-box"></li>
          <li class="image-box"></li>
          <li class="image-box"></li>
          <li class="image-box"></li>
          <li class="image-box"></li>
          <li class="image-box"></li>
        </ul>
      </div>
    </transition>
    <div class="openSlider" @click="openSelect" :class="openFlag? '':'closeSlider'">
      <span class="icon icon-zuoyouhuadong"></span>
      <span>{{openFlag? '滑动':'滑动停止'}}</span>
    </div>
    <v-touch
      class="center"
      oncontextmenu="return false"
      @swipeleft="swiperleft"
      @swiperight="swiperright"
      onmousedown="return false"
    >
      <div ref="canvas" class="canvas" @cornerstoneimagerendered="onImageRendered"></div>
    </v-touch>
    <div class="canvas-tip">
      <span>WW/WC {{ww}}/{{wc}}</span>
      <div class="play-logo" @click="imagePlay">
        <van-icon size="0.3rem" :name="audioFlag? 'pause-circle-o': 'play-circle-o'" />
        <span>{{audioFlag? '暂停': '播放'}}</span>
      </div>
      <span>{{$t('detail.image_position')}} {{imageIndex}}/{{dicomData.length-1}}</span>
    </div>
    <div class="slider" v-if="marksFlag">
      <el-slider
        :disabled="audioFlag"
        :show-tooltip="false"
        v-model="imageIndex"
        :marks="marks"
        :min="0"
        :max="this.dicomData.length-1"
        @change="updateTheImage(imageIndex)"
      ></el-slider>
      <!-- <van-slider
        v-model="imageIndex"
        active-color="#4775d9"
        :min="0"
        :max="this.dicomData.length-1"
        @change="updateTheImage(imageIndex)"
      >
        <template #button>
          <div class="custom-button">{{ imageIndex }}</div>
        </template>
      </van-slider>-->
    </div>
    <div class="footer">
      <span class="btn" :class="wwwcFlag? 'nowClick':''" @click="wwcDisplay">
        <span class="icon icon-duibi"></span>
        <span class="text">{{$t('detail.window')}}</span>
      </span>
      <!-- <span class="btn" :class="panFlag? 'nowClick':''" @click="panDisplay">
        <span class="icon icon-yidong"></span>
        <span class="text">{{$t('detail.position')}}</span>
      </span>-->
      <span class="btn" :class="zoomFlag? 'nowClick':''" @click="zoomDisplay">
        <span class="icon icon-sy"></span>
        <span class="text">缩放移动</span>
      </span>
      <span class="btn" @click="sliderDisplay">
        <!-- <span class="btn" :class="sliderFlag? 'nowClick':''" @click="sliderDisplay"> -->
        <span class="icon icon-fanse"></span>
        <span class="text">{{$t('detail.slide')}}</span>
      </span>
      <span class="btn" :class="aiFlag? 'nowClick':''">
        <span class="icon icon-rengongzhinengdanao" @click="aiDisplay"></span>
        <span class="text">AI标注</span>
      </span>
      <span class="btn">
        <span class="icon icon-zhongzhi" @click="reset"></span>
        <span class="text">{{$t('detail.reset')}}</span>
      </span>
    </div>
    <!-- <van-overlay :show="showFade" @click="showFadeFun">
      <div class="wrapper">
        <div class="qrcode" ref="qrCodeUrl" />
      </div>
    </van-overlay>-->
    <van-popup v-model="showFade" closeable position="bottom" :style="{ height: '80%' }">
      <div class="wrapper">
        <p class="title">分享二维码</p>
        <!-- <div class="qrcode" ref="qrCodeUrl" /> -->
        <van-image width="2rem" height="2rem" :src="codeImg" />
        <div>
          <div class="vicon" @click="creatQrCode">
            <van-icon name="replay" />
          </div>
          <p>
            <van-icon name="info-o" />
            二维码的有效时限为&nbsp;{{shareTime}}&nbsp;分钟
          </p>
          <p v-if="passFlag">
            <van-icon name="info-o" />已设置了四位数安全码
          </p>
          <p>
            <van-icon name="info-o" />修改请到(我的-分享设置)进行修改
          </p>
        </div>
      </div>
    </van-popup>

    <div class="prv" @click="prvClick" @touchmove.prevent>
      <van-icon name="play" color="#ffffff" size="0.4rem" />
    </div>
    <div class="next" @click="nextClick" @touchmove.prevent>
      <van-icon name="play" color="#ffffff" size="0.4rem" />
    </div>
  </div>
</template>

<script>
import { getDcms, getFindggo } from "@/api/home";
import { codeUpdate, getUserShareOption } from "@/api/share";
import * as cornerstone from "cornerstone-core";
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstoneTools from "cornerstone-tools";
import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";
import * as cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
import * as dicomParser from "dicom-parser";
import Hammer from "hammerjs";
import { Notify } from "vant";
import QRCode from "qrcodejs2";
import navbar from "@/components/navbar";
import { Toast } from "vant";
import { NoticeBar } from "vant";
import { mapGetters } from "vuex";

cornerstoneWebImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneTools.init();
export default {
  name: "detail",
  data() {
    return {
      listFlag: false, // 窗位列表flag
      wwwcTool: null,
      wwwcFlag: false, // wwwc列表flag
      panFlag: false, // 移动列表flag
      zoomFlag: false, // 放大镜列表flag
      //sliderFlag: false, // 滑块列表flag
      dicomData: [],
      imageIndex: 0, // 当前片位
      ww: 0,
      wc: 0,
      showShare: false, // 分享flag
      options: [
        { name: "二维码", icon: "qrcode" },
        // { name: "复制链接", icon: "link" }
      ],
      findggoData: [],
      dsId: null,
      patientId: null,
      showFade: false, // qrcode flag
      marks: {},
      marksFlag: false,
      timer: null,
      openid: null,
      shareTime: null,
      passFlag: false,
      codeImg: null,
      openFlag: true,
      aiFlag: true,
      audioFlag: false,
    };
  },
  computed: {
    ...mapGetters(["pId", "dId", "userData", "nowDsid", "nowIndex"]),
  },
  watch: {},
  components: { navbar },
  async created() {
    // this.openid = this.userData.info ? this.userData.info.openId : null;
    this.openid = "ou-IA1XlO3rg_g3Ljsgh0oq3NjDg";
    this.dsId = this.dId;
    this.patientId = this.pId;
    let toast1 = Toast.loading({
      message: this.$t("detailList.loading"),
      forbidClick: true,
      overlay: true,
    });
    let _this = this;
    await getDcms(this.dsId).then((res) => {
      if (res.status.code === 200) {
        this.dicomData = res.data.dicomz;
        let element = this.$refs.canvas;
        cornerstone.enable(element);
        this.updateTheImage(0);
      }
    });
    await getFindggo(this.dsId).then((res) => {
      if (res.status.code === 200) {
        this.findggoData = res.data.ggo;
        this.findggoData.forEach((item) => {
          this.marks[item.coordZ] = "";
          this.marksFlag = true;
        });
      }
    });
    let shareData = await getUserShareOption(this.openid);
    if (shareData.status.code == 200) {
      this.shareTime = shareData.data.expire;
      shareData.data.secret === null
        ? (this.passFlag = false)
        : (this.passFlag = true);
    } else {
      Toast.fail(shareData.status.msg);
    }
    Toast.setDefaultOptions({ duration: 500 });
  },
  mounted() {
    // console.log(this.nowDsid, this.nowIndex);
    // let _this = this;
    // var t,
    //   i = 0;
    // if (this.nowDsid && this.nowDsid == this.dsId) {
    //   i = this.nowIndex;
    // }
    // t = setInterval(async () => {
    //   i++;
    //   if (i == this.dicomData.length - 1) {
    //     clearInterval(t);
    //   } else {
    //     await cornerstone
    //       .loadAndCacheImage(
    //         "wadouri:https://ds.pushiyixue.com/file/" +
    //           this.dsId +
    //           "/z_dicom/" +
    //           this.dicomData[i]
    //       )
    //       .then(function (image) {
    //         // console.log(image.imageId);
    //         let substr = image.imageId.match(/z_dicom\/(\S*)\.dcm/);
    //         let data = {
    //           dsid: _this.dsId,
    //           nindex: Number(substr[1]),
    //         };
    //         console.log(data);
    //         _this.$store.commit("list/SAVE_NOW", data);
    //       });
    //   }
    // }, 100);
    // this.$once("hook:beforeDestroy", () => {
    //   clearInterval(t);
    // });
  },
  beforeDestroy() {
    // let {dsId,imageIndex} = this;
    // this.$store.commit("list/SAVE_NOW")
    clearInterval(this.timer);
  },
  methods: {
    // 初始化
    updateTheImage(imageIndex) {
      this.$nextTick(() => {
        let element = this.$refs.canvas;
        let dsId = this.dsId;
        let _this = this;
        // cornerstone.enable(element);
        return cornerstone
          .loadAndCacheImage(
            "wadouri:https://ds.pushiyixue.com/file/" +
              dsId +
              "/z_dicom/" +
              _this.dicomData[imageIndex]
          )
          .then(function (image) {
            _this.imageIndex = imageIndex;
            let viewport = cornerstone.getViewport(element);
            cornerstone.displayImage(element, image, viewport);
          });
      });
    },
    // 监听图像
    onImageRendered(e) {
      let eventData = e.detail;
      this.ww = Math.round(eventData.viewport.voi.windowWidth);
      this.wc = Math.round(eventData.viewport.voi.windowCenter);
      if (this.aiFlag) {
        this.drawCount(e);
      }
    },
    // 列表显示隐藏
    listDisplay() {
      this.listFlag = !this.listFlag;
    },
    // wwwc工具
    wwcDisplay() {
      this.openFlag = false;
      this.wwwcFlag = !this.wwwcFlag;
      this.panFlag = false;
      this.zoomFlag = false;
      //this.sliderFlag = false;
      if (this.wwwcFlag) {
        let WwwcTool = cornerstoneTools.WwwcTool;
        cornerstoneTools.addTool(WwwcTool);
        cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 1 });
      } else {
        cornerstoneTools.setToolDisabled("Wwwc");
      }
    },
    // 移动
    panDisplay() {
      this.openFlag = false;
      this.panFlag = !this.panFlag;
      this.zoomFlag = false;
      this.wwwcFlag = false;
      // this.sliderFlag = false;
      if (this.panFlag) {
        let PanTool = cornerstoneTools.PanTool;
        cornerstoneTools.addTool(PanTool);
        cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
      } else {
        cornerstoneTools.setToolDisabled("Pan");
      }
    },
    // 放大镜
    zoomDisplay() {
      this.openFlag = false;
      this.zoomFlag = !this.zoomFlag;
      this.panFlag = false;
      this.wwwcFlag = false;
      // this.sliderFlag = false;
      let element = this.$refs.canvas;
      if (this.zoomFlag) {
        //(默认可平移)
        let PanTool = cornerstoneTools.PanTool;
        cornerstoneTools.addTool(PanTool);
        cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });

        const ZoomTouchPinchTool = cornerstoneTools.ZoomTouchPinchTool;
        cornerstoneTools.addTool(ZoomTouchPinchTool);
        cornerstoneTools.setToolActive("ZoomTouchPinch", {
          mouseButtonMask: 1,
        });
        // cornerstoneTools.addTool(cornerstoneTools.ZoomTool, {
        //   configuration: {
        //     invert: false,
        //     preventZoomOutsideImage: false,
        //     minScale: 0.1,
        //     maxScale: 20.0,
        //   },
        // });
        // cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 1 });
      } else {
        cornerstoneTools.setToolDisabled("Zoom");
        cornerstoneTools.setToolDisabled("Pan");
      }
    },
    // 反转
    sliderDisplay() {
      let element = this.$refs.canvas;
      let viewport = cornerstone.getViewport(element);
      viewport.invert = !viewport.invert;
      cornerstone.setViewport(element, viewport);
    },
    // ai标注
    aiDisplay() {
      let element = this.$refs.canvas;
      const viewport = cornerstone.getViewport(element);
      this.aiFlag = !this.aiFlag;
      cornerstone.setViewport(element, viewport);
    },
    // 重置
    reset() {
      if (this.audioFlag) {
        Notify({ type: "warning", message: "请先暂停播放图像" });
      } else {
        this.audioFlag = false;
        this.imageIndex = 0;
        clearInterval(this.timer);
        let element = this.$refs.canvas;
        cornerstoneTools.setToolDisabled("Wwwc");
        cornerstoneTools.setToolDisabled("Pan");
        cornerstoneTools.setToolDisabled("Zoom");
        this.openFlag = true;
        this.panFlag = false;
        this.wwwcFlag = false;
        this.zoomFlag = false;
        cornerstone.reset(element);
        this.updateTheImage(0);
      }
    },
    // 播放
    imagePlay() {
      console.log(1)
      this.audioFlag = !this.audioFlag;
      if (this.audioFlag) {
        this.timer = setInterval(() => {
          if (this.imageIndex >= this.dicomData.length - 1) {
            this.updateTheImage(this.dicomData.length - 1);
            this.audioFlag = false;
            clearInterval(this.timer);
          } else {
            this.updateTheImage(this.imageIndex + 1);
          }
        }, 100);
      } else {
        clearInterval(this.timer);
      }
    },
    // 左滑
    swiperleft() {
      if (this.openFlag) {
        if (this.imageIndex >= this.dicomData.length - 1) {
          this.updateTheImage(this.dicomData.length - 1);
          Notify({
            type: "warning",
            message: "已经是最后一张了！",
          });
        } else {
          this.updateTheImage(this.imageIndex + 1);
        }
      }
    },
    // 右滑
    swiperright() {
      if (this.openFlag) {
        if (this.imageIndex <= 0) {
          this.updateTheImage(0);
          Notify({
            type: "warning",
            message: "已经是第一张了！",
          });
        } else {
          this.updateTheImage(this.imageIndex - 1);
        }
      }
    },
    // 勾画函数封装
    drawCount(eventData) {
      const context = eventData.detail.canvasContext;
      let WL = 512;
      let currentImageIndex = this.imageIndex;
      let myFindggoData = this.findggoData;
      let dealArr = myFindggoData.filter((item) => {
        if (item.coordZ == currentImageIndex) {
          return item;
        }
      });
      dealArr.forEach((item, index) => {
        context.beginPath();
        context.strokeStyle = "red";
        context.lineWidth = 0.8;
        let coordX = JSON.parse(item.coordX);
        let coordY = JSON.parse(item.coordY);
        context.font = "12px Verdana";
        context.fillStyle = "red";
        context.fillText(index + 1, WL - coordX[0], coordY[0] - 5);
        coordX.forEach((item, index) => {
          if (index == 0) {
            context.moveTo(WL - coordX[0], coordY[0]);
          } else {
            context.lineTo(WL - coordX[index], coordY[index]);
          }
        });
        context.closePath();
        context.stroke();
      });
    },
    // 点击分享
    onSelect(option) {
      // let url = location.href;
      let url = `https://ds.pushiyixue.com/share/#/?dsId=${
        this.dsId
      }&patientId=${this.patientId}&token=${sessionStorage.getItem(
        "userToken"
      )}`;
      let _this = this;
      if (option.name == "复制链接") {
        this.$copyText(url).then(
          function () {
            Notify({
              type: "success",
              message: _this.$t("detail.copy_successful") + "!",
            });
          },
          function () {
            Notify({
              type: "error",
              message: _this.$t("detail.copy_failed") + "!",
            });
          }
        );
      } else if (option.name == "二维码") {
        this.creatQrCode();
        this.showFade = true;
      }
      this.showShare = false;
    },
    // 生成qrcode
    async creatQrCode() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      let { openid, dsId, patientId, shareTime } = this;
      let res = await codeUpdate(
        openid,
        shareTime,
        dsId,
        patientId,
        sessionStorage.getItem("userToken"),
        1
      );
      if (res.status.code == 200) {
        let substr = res.data.path.match(/(\S*)\.png/);
        this.codeImg = substr[1] + "logo.png";
      }
      // let url = `https://ds.pushiyixue.com/share/#/?dsId=${
      //   this.dsId
      // }&patientId=${this.patientId}&token=${sessionStorage.getItem(
      //   "userToken"
      // )}`;
      // let qrcode = new QRCode(this.$refs.qrCodeUrl, {
      //   text: url, // 需要转换为二维码的内容
      //   width: 200,
      //   height: 200,
      //   colorDark: "#000000",
      //   colorLight: "#ffffff",
      //   correctLevel: QRCode.CorrectLevel.H,
      // });
      // this.$refs.qrCodeUrl.lastChild.style.position = "absolute";
      // this.$refs.qrCodeUrl.lastChild.style.top = "50%";
      // this.$refs.qrCodeUrl.lastChild.style.left = "50%";
      // this.$refs.qrCodeUrl.lastChild.style.transform = "translate(-50%, -50%)";
    },
    // 清楚qrcode
    showFadeFun() {
      this.showFade = false;
      this.$refs.qrCodeUrl.innerHTML = "";
    },
    // 返回上一页
    goBack() {
      this.$router.push({ path: "/detailList" });
    },
    prvClick() {
      if (this.imageIndex <= 0) {
        this.updateTheImage(0);
        Notify({
          type: "warning",
          message: "已经是第一张了！",
        });
      } else {
        this.updateTheImage(this.imageIndex - 1);
      }
    },
    nextClick() {
      if (this.imageIndex >= this.dicomData.length - 1) {
        this.updateTheImage(this.dicomData.length - 1);
        Notify({
          type: "warning",
          message: "已经是最后一张了！",
        });
      } else {
        this.updateTheImage(this.imageIndex + 1);
      }
    },
    // 滑动开启
    openSelect() {
      cornerstoneTools.setToolDisabled("Wwwc");
      cornerstoneTools.setToolDisabled("Pan");
      cornerstoneTools.setToolDisabled("Zoom");
      this.panFlag = false;
      this.wwwcFlag = false;
      this.zoomFlag = false;
      this.openFlag = !this.openFlag;
    },
    test1() {
      this.dsId = "A1225";
      getDcms(this.dsId).then((res) => {
        if (res.status.code === 200) {
          this.dicomData = res.data.dicomz;
          let element = this.$refs.canvas;
          cornerstone.enable(element);
          this.updateTheImage(0);
          this.reset();
        }
      });
      getFindggo(this.dsId).then((res) => {
        if (res.status.code === 200) {
          this.findggoData = res.data.ggo;
        }
      });
    },
    test2() {
      this.dsId = "A1295";
      getDcms(this.dsId).then((res) => {
        if (res.status.code === 200) {
          this.dicomData = res.data.dicomz;
          let element = this.$refs.canvas;
          cornerstone.enable(element);
          this.updateTheImage(0);
          this.reset();
        }
      });
      getFindggo(this.dsId).then((res) => {
        if (res.status.code === 200) {
          this.findggoData = res.data.ggo;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: black;
  & .van-notice-bar {
    position: absolute;
    top: 45px;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.14rem;
    height: 0.4rem;
    line-height: 0.24rem;
  }
}
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: 45px;
  background: #4775d9;
  background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
  color: #fff;
  & .name {
    font-size: 18px;
  }
  & .icon {
    height: 45px;
    width: 45px;
    line-height: 45px;
    font-size: 20px;
  }
}
.image-container {
  position: relative;
  overflow: hidden;
  overflow-x: scroll;
  height: 65px;
  background: rgb(240, 240, 240);
  & .image-list {
    float: left;
    height: 65px;
    list-style: none;
    white-space: nowrap;
    display: inline-flex;
    & .image-box {
      float: left;
      width: 65px;
      height: 65px;
      border: 1px solid rgb(156, 156, 156);
      box-sizing: border-box;
      margin-right: 0.05rem;
    }
  }
}

.image-container::-webkit-scrollbar {
  display: none;
}
.center {
  position: absolute;
  width: 100%;
  height: 82vh;
  // min-height: 5rem;
  & .canvas {
    width: 100%;
    height: 100%;
  }
}
.canvas-tip {
  position: fixed;
  padding: 0 0.08rem;
  box-sizing: border-box;
  bottom: 0.9rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
  color: white;
  & span {
    display: inline-block;
    font-size: 0.14rem;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.15rem;
  box-sizing: border-box;
  height: 0.45rem;
  background: #4775d9;
  background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
  color: #fff;
  & .icon {
    font-size: 0.2rem;
  }
  & .btn {
    & .text {
      display: block;
      font-size: 0.12rem;
      margin-top: 0.02rem;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.nowClick {
  color: rgba(255, 0, 0, 0.87);
}

.custom-button {
  width: 0.34rem;
  height: 0.22rem;
  color: #fff;
  font-size: 0.14rem;
  line-height: 0.22rem;
  text-align: center;
  background: #4775d9;
  border-radius: 100px;
}

.slider {
  width: 76%;
  position: fixed;
  // bottom: 0.6rem;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 5rem;
  margin: auto;
  background: url()
    no-repeat;
  background-size: 100% 100%;
  margin-top: 0.25rem;
  & .title {
    font-size: 0.16rem;
    margin-top: 0.4rem;
    margin-bottom: 0.1rem;
  }
  & p {
    font-size: 0.14rem;
    text-align: left;
    line-height: 0.25rem;
  }
  & .van-icon {
    vertical-align: sub;
    margin-right: 0.05rem;
    font-size: 0.16rem;
  }
  & .vicon {
    margin: 0.2rem auto;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #4775d9;
    & .van-icon {
      color: #fff;
      margin: auto;
      line-height: 0.45rem;
      font-size: 0.26rem;
    }
  }
}

.qrcode {
  width: 210px;
  height: 210px;
  background-color: #fff;
  display: inline-block;
}

/deep/ .el-slider__stop {
  background: red !important;
}
/deep/ .el-slider__button-wrapper {
  z-index: 1 !important;
}
.next {
  position: fixed;
  right: 0;
  bottom: 0.46rem;
  border-radius: 50%;
  // width: 0.4rem;
  // height: 0.4rem;
  & .van-icon {
    line-height: 0.4rem;
    text-align: center;
  }
}
.next:active,
.prv:active {
  background: rgba(255, 255, 255, 0.534);
}
.prv {
  position: fixed;
  left: 0;
  bottom: 0.46rem;
  border-radius: 50%;
  // width: 0.4rem;
  // height: 0.4rem;
  & .van-icon {
    transform: rotate(180deg);
    line-height: 0.4rem;
    text-align: center;
  }
}
.openSlider {
  position: absolute;
  z-index: 1;
  right: 0;
  color: #ffb939;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & span:nth-of-type(1) {
    font-size: 0.28rem;
  }
  & span:nth-of-type(2) {
    margin-top: 0.05rem;
    font-size: 0.12rem;
  }
}
.closeSlider {
  color: #999999;
}
.play-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & span {
    font-size: 0.12rem;
    margin-top: 0.02rem;
  }
}
</style>
